<!-- 充值 -->
<template>
  <view class="draw-money-wrap u-p-b-30">
    <view class="head-box">
      <shopro-navbar :background="{ background: navBackground }" :backTextStyle="{ color: '#fff' }" backText="充值"
        backIconColor="#fff"></shopro-navbar>
      <!-- 账户 -->
      <view class="wallet-num-box u-flex u-col-center u-row-between">
        <view class="">
          <view class="num-title">账户余额（元）</view>
          <view class="wallet-num">{{ userInfo.money || '0.00' }}</view>
        </view>
        <button class="u-reset-button log-btn"
          @tap="$Router.push({ path: '/pages/user/wallet/top-up-log' })">充值记录</button>
      </view>
    </view>
    <!-- 充值输入卡片-->
    <view class="draw-card">
      <view class="x-f">
        <!-- <view class="card-title">门店</view> -->
        <view class="logo_title x-f card-title" style="font-size: 30rpx;font-weight: 600;">
          {{storeInfo.name || ''}}
          <view @click="qiehuan()" class="qiehuan" style="display: flex;align-items: center;justify-content: center;">
            <image src="../../../static/imgs/qiehuan.png" mode="widthFix"
              style="width: 28rpx;height: 28rpx;margin-left: 22rpx;margin-right: 8rpx;">
            </image>
            切换门店
          </view>
        </view>
      </view>
      <!-- <view class="card-title">充值金额</view> -->
      <view class="input-box u-flex u-col-center">
        <view calss="unit">￥</view>
        <input class="u-flex-1 u-p-l-10" type="digit" @focus="onTopupFous" @input="onTopupInput" v-model="money"
          placeholder-style="font-size: 30rpx; font-weight: 500;color:#C2C7CF;" placeholder="请输入充值金额" />
      </view>
      <!-- 快捷充值 -->
      <view class="top-up-content u-p-b-30" v-if="initRecharge.moneys.length">
        <view class="card-title">快捷充值</view>
        <view class="u-flex u-flex-wrap">
          <view class="top-up-card u-flex u-row-center u-col-center u-m-b-30 u-m-r-30"
            :class="{'top-up-active':curMoneyCard === index}" v-for="(item,index) in initRecharge.moneys" :key="index"
            @tap="selectCard(index)">
            <view class="top-up-value">
              {{item.money}}
            </view>
          </view>
        </view>
      </view>
      <button class="u-reset-button save-btn" :style="{opacity:!money ? 0.7 : 1 }" :disabled="!money"
        @tap="confirmTopup">确认充值</button>
    </view>


    <!-- 充值说明 -->
    <view class="draw-notice">
      <view class="title">充值说明</view>
      <view class="draw-list">1.充值为在线支付，即时到账，不支持退款；</view>
      <view class="draw-list">
        2.充值后金额会自动进入您的余额账户，请注意查收。
      </view>
    </view>

    <u-modal v-model="show" :content="content" show-cancel-button="true" @confirm="confirm"></u-modal>
  </view>
</template>

<script>
  import {
    mapState,
    mapActions,
    mapGetters
  } from 'vuex';
  import FormValidate from '@/shopro/validate/form';
  import wechat from '@/shopro/wechat/wechat';
  export default {
    components: {},
    data() {
      return {
        storeInfo: {},
        money: '', //提现金额
        showModal: false,
        show: false,
        content: "222",
        curMoneyCard: '',
        navBackground: 'none'
      };
    },
    computed: {
      ...mapGetters(['userInfo', 'initRecharge'])
    },
    onShow() {
      this.getStore();
    },
    async onLoad() {},
    onPageScroll(e) {
      this.navBackground = e.scrollTop > 50 ?
        `url(${this.$IMG_URL}/imgs/user/draw_money_head_bg.png) no-repeat top / 100% auto` : 'none';
    },
    methods: {
      confirm() {
        let that = this
        if (this.money <= 0) {
          this.$u.toast('请选择或输入充值金额');
          return;
        }
        that.$http(
          'money.recharge', {
            recharge_money: that.money
          },
          '确认中...'
        ).then(res => {
          if (res.code === 1) {
            that.money = '';
            that.$Router.push({
              path: `/pages/order/payment/method`,
              query: {
                orderId: res.data.id,
                orderType: 'recharge'
              }
            });
          } else {
            that.$u.toast(res.msg);
          }
        });
      },
      getStore(is_set = false) {
        let that = this;
        console.log("getStore")
        console.log(this.$Route.query.store_id)
        that.$http('commonIndex.getStore').then(res => {
          if (res.code === 1) {
            that.storeInfo = res.data.store;
            console.log("res")
            console.log(res)
            if (res.data.store.id && is_set) {
              uni.setStorageSync('now_store_id', res.data.store.id); //设置缓存
              console.log("设置缓存")
              console.log(uni.getStorageSync('now_store_id'))
              uni.setStorageSync('now_store', res.data.store); //设置缓存
            }
          }
        });
      },
      // 充值输入框
      onTopupInput(e) {
        this.$nextTick(() => {
          this.money = this.clearNoNum(e.detail.value)
        })
      },
      // 获取焦点
      onTopupFous() {
        this.curMoneyCard = ''
      },
      // 路由跳转
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      },
      qiehuan(value = '') {
        this.jump('/pages/order/business-address', {
          goodsId: -1,
          lat: this.latitude,
          lng: this.longitude,
          storeId: this.storeInfo.id
        })
      },
      // 选择充值卡片
      selectCard(index) {
        this.curMoneyCard = index
        this.money = this.initRecharge.moneys[index].money
      },

      confirmTopup() {
        const that = this;
        this.content = `确定充值到${this.storeInfo.name}这家门店？`
        that.show = true
      },

      // 校验金额
      clearNoNum(val) {
        if (val == ".") {
          val = "0.";
        }
        val = val.replace(/[^\d.]/g, "");
        //必须保证第一个为数字而不是.
        val = val.replace(/^\./g, "");
        //保证只有出现一个.而没有多个.
        val = val.replace(/\.{2,}/g, ".");
        //保证.只出现一次，而不能出现两次以上
        val = val
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        //只能输入两位小数
        val = val.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
        if (val.indexOf(".") < 0 && val != "") {
          //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
          val = parseFloat(val);
        }
        return val
      }
    }
  };
</script>

<style lang="scss">
  .head-box {
    background: url($IMG_URL+'/imgs/user/draw_money_head_bg.png') no-repeat;
    background-size: 100% auto;
    min-height: 400rpx;
    padding-bottom: var(--status-bar-height);

    // 可提现
    .wallet-num-box {
      padding: 20rpx 40rpx 0;

      .num-title {
        font-size: 26rpx;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 20rpx;
      }

      .wallet-num {
        font-size: 60rpx;
        font-weight: 500;
        color: #ffffff;
      }

      .log-btn {
        width: 170rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: rgba(255, 255, 255, 0.1);
        border: 1rpx solid #eeeeee;
        border-radius: 30rpx;
        padding: 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }

  // 提现输入卡片
  .draw-card {
    background-color: #fff;
    border-radius: 20rpx;
    width: 690rpx;
    min-height: 400rpx;
    margin: -70rpx auto 30rpx;
    padding: 30rpx;

    .card-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      margin-bottom: 30rpx;
    }

    .input-box {
      width: 624rpx;
      border-bottom: 1rpx solid #eee;
      height: 100rpx;
      margin-bottom: 40rpx;

      .unit {
        font-size: 48rpx;
        color: #333;
      }
    }

    .save-btn {
      width: 616rpx;
      height: 86rpx;
      line-height: 86rpx;
      background: linear-gradient(-90deg, #a36fff, #5336ff);
      box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
      border-radius: 43rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #ffffff;
    }

    // 充值卡片
    .top-up-card {
      width: 190rpx;
      height: 124rpx;
      background: #F7F6FB;
      border-radius: 12rpx;
      transition: all linear 0.2s;

      &:nth-of-type(3n) {
        margin-right: 0 !important;
      }

      .top-up-value {
        font-size: 36rpx;
        font-weight: 500;
        color: #999999;

        &::after {
          content: '元';
          font-size: 24rpx;
        }
      }
    }

    .top-up-active {
      background: #564BBD;
      transition: all linear 0.2s;

      .top-up-value {
        color: #fff
      }
    }
  }

  // 提现说明
  .draw-notice {
    width: 684rpx;
    min-height: 180rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 35rpx;
    margin: 20rpx auto;

    .title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      margin-bottom: 30rpx;
    }

    .draw-list {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      margin-bottom: 10rpx;
    }
  }
</style>